<template>
  <!-- userName(用户名) password personName(员工姓名) personAge phoneNum departId roleId personSalary-->
  <div class="app-container" style="padding-top: 20px">
    <el-form label-width="120px">
      <!-- 用户名（昵称） -->
      <el-form-item label="用户名">
        <el-col :span="3">
          <el-input v-model="person.username" />
        </el-col>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item label="密码">
        <el-col :span="3">
          <el-input v-model="person.password" />
        </el-col>
      </el-form-item>
      <!-- 姓名 -->
      <el-form-item label="姓名">
        <el-col :span="3">
          <el-input v-model="person.personName" />
        </el-col>
      </el-form-item>
      <!-- 手机号 -->
      <el-form-item label="手机号">
        <el-col :span="3">
          <el-input v-model="person.phoneNum" />
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate" id="savabtn">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      person: {},
      // 部门名字
      departName: '',
      saveBtnDisabled: false, // 保存按钮是否禁用

    }
  },
  created () {
    this.init()
  },
  watch: {
    $route (to, from) {
      this.init()
    }
  },

  methods: {
    //页面的初始化过程
    init () {
      if (this.$route.params && this.$route.params.id) {
        //员工修改
        let id = this.$route.params.id

        //员工数据的回显
        this.findById(id)
      } else {
        //员工添加
        this.person = {}

      }
    },
    //判断保存的是增加操作还是修改操作
    saveOrUpdate () {
      if (this.$route.params && this.$route.params.id) {
        this.updateEmp()
      } else {
        this.addEmp()
      }
    },
    //员工的修改
    updateEmp () {
      this.$http({
        method: "put",
        url: `person/updatePerson`,
        data: this.person,
      }).then((res) => {
        console.log('personSave中修改的res', res)
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "修改成功!",
          })
          //   跳转到list页面
          this.$router.push("/person")
        } else {
          this.$message({
            type: "error",
            message: "很遗憾，修改失败！",
          })
        }
        this.saveBtnDisabled = true
      })
    },
    //根据员工id查询员工
    findById (id) {
      this.$http({
        method: "get",
        url: `person/findById/${id}`,
      }).then((res) => {
        this.person = res.data.data.person
      })
    },

    // 住户增加
    addEmp () {
      console.log(this.person)
      this.$http({
        method: "post",
        // 注意 /
        url: `person/addPerson`,
        // 
        data: JSON.stringify(this.person),
        headers: {
          'Content-Type': 'application/json'
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "添加成功!",
          })
          //   跳转到list页面
          this.$router.push("/person")
        } else {
          this.$message({
            type: "error",
            message: "添加失败，该用户名已经注册！",
          })
        }
        this.saveBtnDisabled = true
      })
    },
  },
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  float: left;
  background-color: #fff;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

#savabtn {
  margin-left: -1300px;
}
</style>